<template>
  <div id="app">
    <div class="sidebar">
      // 在sidebar-header部分添加按钮
      <div class="sidebar-header">
        <h2>DeepAI 助手</h2>
        <div class="nav-buttons">
          <el-button type="primary" size="small" @click="startNewChat">
            新的聊天
          </el-button>
          <el-button type="success" size="small" @click="goToTestCase">
            测试用例
          </el-button>
          <el-button type="info" size="small" @click="toggleMusic">
            音乐开关
          </el-button>
        </div>
      </div>
      
      <div class="history-list">
        <template v-for="(group, date) in groupedSessions" :key="date">
          <div class="date-group">
            <div class="date-header">{{ formatDateGroup(date) }}</div>
            <div v-for="session in group" 
                 :key="session.sessionId" 
                 class="session-item"
                 :class="{ active: currentSessionId === session.sessionId }">
                 <div class="session-content" @click="switchSession(session.sessionId)">
                   <div class="session-title">{{ session.title || '新对话' }}</div>
                   <div class="session-time">{{ formatTime(session.lastMessageTime) }}</div>
                 </div>
                 <el-button
                   class="delete-btn"
                   type="text"
                   size="small"
                   @click.stop="deleteSession(session.sessionId)"
                 >
                   <el-icon><Delete /></el-icon>
                 </el-button>
               </div>
          </div>
        </template>
      </div>
    </div>
    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>

<script>
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus' 
import dayjs from 'dayjs'
import { Delete } from '@element-plus/icons-vue'  // 添加图标导入

export default {
  components: {
    Delete  // 注册图标组件
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    
    const currentSessionId = computed(() => store.state.sessionId)
    
    // 按日期分组的会话列表
    const groupedSessions = computed(() => {
      const sessions = store.state.chatSessions
      const groups = {}
      
      sessions.forEach(session => {
        const date = dayjs(session.lastMessageTime).format('YYYY-MM-DD')
        if (!groups[date]) {
          groups[date] = []
        }
        groups[date].push(session)
      })
      
      // 对每个组内的会话按时间倒序排序
      Object.values(groups).forEach(group => {
        group.sort((a, b) => new Date(b.lastMessageTime) - new Date(a.lastMessageTime))
      })
      
      return groups
    })
    
    // 格式化日期组标题
    const formatDateGroup = (date) => {
      const today = dayjs().format('YYYY-MM-DD')
      const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
      
      if (date === today) return '今天'
      if (date === yesterday) return '昨天'
      return dayjs(date).format('YYYY年MM月')
    }
    
    // 格式化时间
    const formatTime = (timestamp) => {
      return dayjs(timestamp).format('HH:mm')
    }
    
    // 切换会话
    const switchSession = async (sessionId) => {
      await store.dispatch('switchSession', sessionId)
      router.push('/')
    }
    
    // 开始新会话
    const startNewChat = async () => {
      await store.dispatch('createNewSession')
      router.push('/')
    }
    
    // 组件加载时获取会话列表
    onMounted(() => {
      store.dispatch('loadChatSessions')
    })
    
    // Add navigation method
    const goToTestCase = () => {
      router.push('/testcase')
    }
    
    // 添加删除会话方法
    const deleteSession = async (sessionId) => {
      try {
        await store.dispatch('deleteSession', sessionId)
      } catch (error) {
        ElMessage.error('删除会话失败')
      }
    }
    
    // 在setup()函数中添加音乐控制方法
    const toggleMusic = () => {
      const music = document.getElementById('bg-music');
      if (music.paused) {
        music.play();
      } else {
        music.pause();
      }
    };
    
    return {
      currentSessionId,
      groupedSessions,
      formatDateGroup,
      formatTime,
      switchSession,
      startNewChat,
      goToTestCase,
      deleteSession,
      toggleMusic  // 添加这行以解决未使用变量警告
    }
  }
}
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app {
  font-family: 'Orbitron', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #00f3ff;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
}

.sidebar {
  width: 300px;
  background-color: rgba(20, 20, 30, 0.8);
  border-right: 1px solid #00f3ff;
  padding: 20px;
  overflow-y: auto;
  height: 100%;
  backdrop-filter: blur(5px);
}

.el-button {
  border: 1px solid #ff00ff;
  background: rgba(0, 0, 0, 0.5);
  color: #00f3ff;
  transition: all 0.3s;
}

.main-content {
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  padding: 10px;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.history-item:hover {
  background-color: #e9ecef;
}

.nav-buttons {
  display: flex;
  gap: 10px;
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

.sidebar-header h2 {
  margin: 0;
}

.date-group {
  margin-bottom: 20px;
}

.date-header {
  padding: 10px 20px;
  font-size: 0.9em;
  color: #666;
  background-color: #f9f9f9;
}

.session-item {
  padding: 15px 20px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-content {
  flex: 1;
  min-width: 0;  /* 防止子元素溢出 */
}

.delete-btn {
  opacity: 0;
  transition: opacity 0.2s;
}

.session-item:hover .delete-btn {
  opacity: 1;
}

.session-item.active {
  background-color: #e6f7ff;
  border-right: 3px solid #1890ff;
}

.session-title {
  font-weight: 500;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-time {
  font-size: 0.8em;
  color: #999;
}
* {
  box-sizing: border-box;
}

/* 添加打字机效果的样式 */
.typing-effect {
  white-space: pre-wrap;
  word-break: break-word;
}

.typing-effect:after {
  content: '▋';
  animation: blink 1s infinite;
  font-weight: bold;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
</style>

<style>
/* 确保在不同比例下都能完整显示 */
#app {
  aspect-ratio: 16/9; /* 基础比例 */
  overflow: hidden;
}

@media (max-aspect-ratio: 16/9) {
  #app {
    background-size: auto 100%;
  }
}
@media (min-aspect-ratio: 16/9) {
  #app {
    background-size: 100% auto;
  }
}
</style>

<style>
/* 移除原有的背景设置 */
#app {
  font-family: 'Orbitron', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #00f3ff;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  background: transparent !important; /* 关键修改 */
}

/* 确保视频背景在最底层 */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
</style>
